<template>
  <div>
    <div class="rightListBigBox">
      <div class="rightListBox" :style="listBoxStyle" :class="{rightListBoxDark:darkFlag}">
        <LinkBox></LinkBox>
      </div>
      <div class="btnBox" @mousedown="listOn()">
        <div :class="{ openBtnChange: !this.flag ,openBtnDark:darkFlag,openBtnChangeDark:darkFlag&!this.flag}" class="openBtn">
          <span
            class="iconfont icon-xiangzuojiantou"
            style="font-size: 20px"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LinkBox from "./LinkBox.vue";
import bus from "../bus";
export default {
  components: {
    LinkBox,
  },
  data() {
    return {
      webHeight: window.innerHeight,
      listBoxStyle: {
        width: "",
        height: "",
      },
      flag: true,
      // darkFlag:false,
    };
  },
  created() {},
  mounted() {
    // bus.$on("darkFlag", (flag) => {
    //   this.darkFlag = flag;
    // });
    bus.$on("rightListFlag", (flag) => {
      this.flag = flag;
      if (this.flag) {
        this.listBoxStyle.width = "450px";
        this.flag = !this.flag;
      } else {
        this.listBoxStyle.width = "50px";
        this.flag = !this.flag;
      }
    });
  },
  beforeDestroy(){
    bus.$off()
  },
  computed:{
    darkFlag(){
      return this.$store.state.darkFlag
    }
  },
  methods: {
    listOn() {
      if (this.flag) {
        this.listBoxStyle.width = "450px";
        this.flag = !this.flag;
      } else {
        this.listBoxStyle.width = "50px";
        this.flag = !this.flag;
      }
    },
  },
};
</script>

<style scoped>
.rightListBox {
  width: 50px;
  background-color: rgb(237, 237, 237);
  float: right;
  transition: all 0.3s !important;
  position: relative;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.rightListBoxDark{
  background-color: #363636;
  color:#fff;
}
.rightListBox::-webkit-scrollbar {
  width: 6px;
}
.rightListBox::-webkit-scrollbar-button  {
  display: block;
  height: 20px;
}
.rightListBox::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.rightListBoxDark::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: rgba(255, 255, 255,0.3);
  border-radius: 6px;
}
.btnBox {
  width: 55px;
  height: 100vh;
  float: right;
  transition: all 0.3s;
  opacity: 0;
  z-index: 2;
}
.btnBox:hover {
  opacity: 1;
}
.openBtn {
  float: right;
  width: 35px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 45px;
  border-radius: 10rem 0rem 0rem 10rem;
  cursor: pointer;
  margin-top: 45vh;
  color: black;
  transition: all 0.2s;
}
.openBtn:hover{
  color: #fdaf27;
}
.openBtnChange {
  float: right;
  width: 35px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  border-radius: 0rem 10rem 10rem 0rem;
  margin-top: 45vh;
  transform: scale(-1, 1);
}
.openBtnDark {
  background-color: #2e2e2e;
  color: #fff;
}
.openBtnDark :hover{
  color: #fdaf27;
}
.openBtnDark span{
  color: #fff;
}
.openBtnChange {
  float: right;
  width: 35px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  border-radius: 0rem 10rem 10rem 0rem;
  margin-top: 45vh;
  transform: scale(-1, 1);
}
.openBtnChangeDark {
  float: right;
  width: 35px;
  height: 45px;
  background-color: #171717;
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  border-radius: 0rem 10rem 10rem 0rem;
  margin-top: 45vh;
  transform: scale(-1, 1);
}
</style>